<script setup>
import { computed } from 'vue';
import { $t } from '@/locales';

defineOptions({ name: 'CardData' });

const cardData = computed(() => [
  {
    key: 'visitCount',
    title: $t('page.home.visitCount'),
    value: 12256,
    unit: '',
    tag: '',
    color: {
      start: '#f3f9fe',
      end: '#e6f4fe'
    },
    msgTitle: '转换率',
    msgValue: '8.21%',
  },
  {
    key: 'turnover',
    title: $t('page.home.turnover'),
    value: 1135,
    unit: '',
    tag: '',
    color: {
      start: '#f5fef2',
      end: '#e6feee'
    },
    msgTitle: '客单价',
    msgValue: 'Rp 109.01K',
  },
  {
    key: 'downloadCount',
    title: $t('page.home.downloadCount'),
    value: 592,
    unit: 'Rp',
    tag: '',
    color: {
      start: '#f2f9fe',
      end: '#e6f4fe'
    },
    msgTitle: '毛利',
    msgValue: 'Rp 392.32M',
  },
  {
    key: 'dealCount',
    title: $t('page.home.dealCount'),
    value: 292,
    unit: 'Rp',
    tag: 'ROI',
    color: {
      start: '#f6f7ff',
      end: '#ececff'
    },
    msgTitle: '盈利',
    msgValue: 'Rp 100.32M（34.54%）',
  }
]);

function getGradientColor(color) {
  return `linear-gradient(to bottom, ${color.start}, ${color.end})`;
}
</script>

<template>
  <ElCard class="card-wrapper">
    <template #header>
      <div class="card-header">
        <span>数据一览</span>
      </div>
    </template>
    <ElRow :gutter="16">
      <ElCol v-for="item in cardData" :key="item.key" :lg="6" :md="12" :sm="24" class="my-8px">
        <div :style="{ backgroundImage: getGradientColor(item.color) }" class="flex-1 p-16px">
          <h3 class="text-16px mb-24px">{{ item.title }}</h3>
          <CountTo
            :prefix="item.unit"
            :start-value="1"
            :end-value="item.value"
            class="text-24px text-dark"
          />
          <div class="flex-y-center">
            <el-text class="text-12px">{{ item.msgTitle }}</el-text>
            <el-text type="danger" class="pt-10px ml-8px">{{ item.msgValue }}</el-text>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </ElCard>
</template>

<style scoped></style>
